<template>
  <el-card>
    <div class="flex justify-between items-center mb-4">
      <h2>课题管理</h2>
      <el-button type="primary" @click="$router.push('/enterprise/projects/create')">
        <el-icon-plus /> 发布新课题
      </el-button>
    </div>

    <el-table v-loading="loading" :data="topicList" border>
      <el-table-column prop="title" label="课题名称" width="250"></el-table-column>
      <el-table-column prop="category" label="研究方向"></el-table-column>
      <el-table-column prop="deadline" label="截止日期"></el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        :formatter="formatStatus"
      ></el-table-column>
      <el-table-column label="申请人数">
        <template #default="scope">
          {{ scope.row.applications?.length || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button
            size="small"
            @click="$router.push(`/topics/edit/${scope.row.id}`)"
            v-if="scope.row.status === 'draft' || scope.row.status === 'open'"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="success"
            @click="$router.push(`/applications?topicId=${scope.row.id}`)"
            v-if="scope.row.applications && scope.row.applications.length > 0"
          >
            查看申请
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleClose(scope.row.id)"
            v-if="scope.row.status === 'open'"
          >
            截止招募
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="mt-4 flex justify-end">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="total"
        @current-change="fetchTopics"
        @size-change="fetchTopics"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import {
  getMyProjects,
  deleteProject,
  type Topic,
  type BaseResponse
} from '@/api/topic';

const topicList = ref<Topic[]>([]);
const loading = ref(true);
const total = ref(0);

const pagination = ref({
  page: 1,
  size: 10
});

// 获取课题列表
const fetchTopics = async () => {
  loading.value = true;
  try {
    const res = await getMyProjects({
      page: pagination.value.page,
      size: pagination.value.size
    });

    if (res.code === 0 && res.data) {
      topicList.value = Array.isArray(res.data) ? res.data : []; // 根据实际API返回结构调整
      total.value = res.total || 0; // 使用API返回的total字段
    } else {
      ElMessage.error(res.message || '获取课题列表失败');
    }
  } catch (error) {
    ElMessage.error('获取课题列表失败');
  } finally {
    loading.value = false;
  }
};

// 格式化状态显示
const formatStatus = (row: Topic) => {
  const statusMap: Record<string, string> = {
    draft: '草稿',
    open: '招募中',
    closed: '已截止',
    completed: '已完成'
  };
  return statusMap[row.status] || row.status;
};

// 截止课题招募
const handleClose = async (id: number) => {
  try {
    const res = await deleteProject(id);
    if (res.code === 0) {
      ElMessage.success('课题已截止');
      fetchTopics(); // 刷新列表
    } else {
      ElMessage.error(res.message || '操作失败');
    }
  } catch (error) {
    ElMessage.error('操作失败');
  }
};

onMounted(fetchTopics);
</script>
